<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>修改</title>
    <style>
        ul{
            margin: 0px;
            padding: 0;
            list-style: none;
            display: flex;
            position: relative;
        }
        li{
            width:20px;
            height:20px;
            background-image:url("./img/star.png");
            margin-left:10px;
        }
        li.show{
             background-position:0px -28px;
        }
         li.active{
             background-position:0px -28px;
        }
        li.current{
             background-position:0px -28px;
        }
        ul div{
            width:150px;
            position: absolute;
            top:25px;
            background-color:lightseagreen;
            display: none;
        }
        ul p{
            margin:0;
            margin-left:25px;
        }
    </style>
</head>

<body>
<ul class="list">
    <strong>宝贝与表述相符</strong>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <p><span class="one"></span><span class="two"></span></p>
    <div>
       <span class="one"></span>
       <br>
       <span class="two"></span>
    </div>
</ul>

<script src='./jquery.js'></script>
</body>

</html>
<script>
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    var arr;
    var count = 0;
function showStart(sum){
    for( var i = 0; i < $('li').length; i++ )
        if( i < sum ){
            $('li').eq(i).addClass('active');
        }
        else{
            $('li').eq(i).removeClass('active');
        }
}
    $('li').mouseover(function(){
        showStart($(this).index());
        arr = msg[$(this).index() - 1];
        $('div').show();
        $('div').css('left',$(this).offset().left - 65);
        $('div').find('.one').html(arr.split('|')[0]).css('color','red');
        $('div').find('.two').html(arr.split('|')[1]).css('color','green'); 
    })

    $('li').mouseout(function(){
        $('div').hide();
        showStart(count);
    })

    $('li').click(function(){
        count = $(this).index();
        $('p').show();
        $('p').find('.one').html(arr.split('|')[0]).css('color','red');
        $('p').find('.two').html(arr.split('|')[1]).css('color','green'); 
    })

     
</script>